<template>
  <div :class="$style['row']" >
    <div class="flex-1 flex items-center px-2 overflow-hidden gap-x-1 whitespace-nowrap">
      <span v-if="matcher.tag === StatTag.Outdated" :class="[$style['tag'], $style['tag-outdated']]">{{ t('map.mods.outdated') }}</span>
      <span v-if="matcher.tag === StatTag.HeistExclusive" :class="[$style['tag'], $style['tag-heist']]">{{ t('map.mods.heist') }}</span>
      <span v-if="matcher.tag === StatTag.UberMapExclusive" :class="[$style['tag'], $style['tag-uber']]">{{ t('map.mods.uber') }}</span>
      <span class="truncate">{{ matcher.matchStr }}</span>
    </div>
    <div class="flex items-baseline gap-x-4" :class="{ [$style['controls-auto-hide']]: !removable() }">
      <ui-radio v-model="decision" value="w" class="p-1" />
      <ui-radio v-model="decision" value="d" class="p-1" />
      <ui-radio v-model="decision" value="g" class="p-1" />
      <button v-if="removable()" @click="remove"
        class="flex items-center mx-1 py-1" :class="{ 'text-red-400': matcher.tag === StatTag.Outdated }">
        <i class="w-4" :class="(matcher.tag === StatTag.Outdated) ? 'fas fa-trash-alt' : 'fas fa-times'"></i>
      </button>
      <div v-else class="w-6" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, PropType } from 'vue'
import { useI18n } from 'vue-i18n'
import { StatMatcher, StatTag, decisionHasColor, decisionCreate, MapCheckConfig } from './common.js'

export default defineComponent({
  emits: [],
  props: {
    matcher: {
      type: Object as PropType<StatMatcher>,
      required: true
    },
    selectedStats: {
      type: Array as PropType<MapCheckConfig['selectedStats']>,
      required: true
    },
    profile: {
      type: Number,
      required: true
    }
  },
  setup (props) {
    const { t } = useI18n()

    const entry = computed(() => props.selectedStats
      .find(({ matcher }) => matcher === props.matcher.matchStr))

    const decision = computed<string>({
      get () {
        if (!entry.value) return '-'
        return entry.value.decision[props.profile - 1]
      },
      set (value) {
        const newSet = decisionCreate(value, props.profile, entry.value?.decision)
        if (!entry.value) {
          props.selectedStats.push({
            matcher: props.matcher.matchStr,
            decision: newSet
          })
        } else {
          entry.value.decision = newSet
        }
      }
    })

    function remove () {
      if (entry.value) {
        decision.value = '---'
      }
    }

    return {
      t,
      entry,
      decision,
      removable () {
        return decisionHasColor(entry.value?.decision ?? '---', props.profile)
      },
      remove,
      StatTag
    }
  }
})
</script>

<style lang="postcss" module>
.row {
  display: flex;
  align-items: center;
  width: 100%;
  @apply h-8;
  cursor: default;
  line-height: 1;
}

.row:hover {
  @apply bg-gray-700;
}

.row:not(:hover) .controls-auto-hide {
  display: none !important;
}

.tag {
  @apply px-1;
  @apply rounded;
  line-height: 1;
}
.tag-heist {
  @apply bg-red-800;
}
.tag-uber {
  @apply bg-purple-600;
}
.tag-outdated {
  @apply bg-red-400 text-black;
}
</style>
